<template>
	<view class="content">
		<view class="information">
			<view class="left">
				<view class="s_time font48">
					{{date}}
				</view>
				<view class="n_date">
					<view class="week font28">
						{{weekDay}}
					</view>
					<view class="day font30">
						{{n_date}}
					</view>
				</view>
			</view>
			<view class="workTime font28">
				{{new_day}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{workTime}}
			</view>
			<view class="stept">
				<y-steps :stepList="stepList"></y-steps>
			</view>
			<view class="location">
				<view class="icon">


					<image src="../../../static/images/finance/ladd.png" mode="aspectFit"></image>


					<image src="../../../static/images/finance/ladd.png" mode="aspectFit"></image>

					<image src="/technicianadd/static/images/ladd.png" mode="aspectFit"></image>



					<image src="/technicianadd/static/images/ladd.png" mode="aspectFit"></image>

				</view>
				<view class="title font28">
					{{address}}
				</view>
				<view class="image">


					<image src="../../../static/images/technician/s.png" mode="aspectFit"></image>


					<image src="../../../static/images/technician/s.png" mode="aspectFit"></image>

					<image src="/technicianadd/static/images/s.png" mode="aspectFit"></image>



					<image src="/technicianadd/static/images/s.png" mode="aspectFit"></image>

				</view>
			</view>
			<view class="btn font30 fontw" @click="daka">
				打卡
			</view>
		</view>
		<view class="dai font28 fontw">
			待服务
		</view>
		<view class="list">
			<view class="item" v-for="(item,index) in list" :key="index">
				<view class="image">
					<image :src="item.image" mode="aspectFit"></image>
				</view>
				<view class="info">
					<view class="title font30 fontw">
						{{item.name}}
					</view>
					<view class="tabs">
						<view class="items font22" v-for="(items,indexs) in item.tabs" :key="indexs">
							{{indexs+1 == item.tabs.length?`${items}`:`${items}` + ' | '}}
						</view>
					</view>
					<view class="left">
						<view class="n_price font30 fontw">
							<text class="font22">￥</text>{{item.newPrice}}
						</view>
						<view class="o_price font22">
							￥{{item.oldPrice}}
						</view>
						<view class="icon">


							<image src="../../../static/images/technician/sz.png" mode="aspectFit"></image>


							<image src="../../../static/images/technician/sz.png" mode="aspectFit"></image>

							<image src="/technicianadd/static/images/sz.png" mode="aspectFit"></image>



							<image src="/technicianadd/static/images/sz.png" mode="aspectFit"></image>

						</view>
						<view class="time font22">
							{{item.time}}分钟
						</view>
					</view>
				</view>
				<view class="s_time">
					<view class="text font22">
						{{item.s_time}}
					</view>
					<view class="tips font18">
						时间快到啦
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import YSteps from '@/components/MarsXHChang-YSteps/YSteps.vue'
	export default {
		components: { YSteps },
		data() {
			return {
				date: '',
				n_date: '',
				weekDay: '',
				new_day: '',
				address: '东莞市南城区中环100A座516',
				workTime: '09:30-23:30',
				intervalId: null,
				stepList: [{
						date: '09:16', // 左侧日期 -- 必选
						add: '东莞市南城区中环100', // 左侧时间 -- 必选
						info: '上班', // 右侧内容 -- 可选
						isFinished: true, // 是否已完成（完成 index 为 √）-- 可选
						isActive: false, // 是否为当前节点 Active（当前节点 即使完成 index 也不会显示 √）-- 可选
						isShowSlot: false, // 右侧是否有 Slot（显示在 右侧内容下方）-- 可选
						fris: true,
					},
					{
						date: '23:32',
						add: '东莞市南城区中环100',
						info: '下班',
						isFinished: true,
						isActive: true,
						isShowSlot: true,
					}
				],
				list: [{


					image: '../../../static/logo.png',


					image: '../../../static/logo.png',

					image: '/static/logo.png',



					image: '/static/logo.png',

					name: '同城养生›舒缓同城养生›舒缓S同城养生›舒缓S同城养生›舒缓S',
					tabs: ['精油养生', '全身推拿'],
					newPrice: '0.01',
					oldPrice: '698',
					time: '120',
					s_time: '03:56'
				}, {


					image: '../../../static/logo.png',


					image: '../../../static/logo.png',

					image: '/static/logo.png',



					image: '/static/logo.png',

					name: '同城养生›舒缓S...',
					tabs: ['精油养生', '全身推拿'],
					newPrice: '0.01',
					oldPrice: '698',
					time: '120',
					s_time: '03:56'
				}, {


					image: '../../../static/logo.png',


					image: '../../../static/logo.png',

					image: '/static/logo.png',



					image: '/static/logo.png',

					name: '同城养生›舒缓S...',
					tabs: ['精油养生', '全身推拿'],
					newPrice: '0.01',
					oldPrice: '698',
					time: '120',
					s_time: '03:56'
				}, {


					image: '../../../static/logo.png',


					image: '../../../static/logo.png',

					image: '/static/logo.png',



					image: '/static/logo.png',

					name: '同城养生›舒缓S...',
					tabs: ['精油养生', '全身推拿'],
					newPrice: '0.01',
					oldPrice: '698',
					time: '120',
					s_time: '03:56'
				}]
			};
		},
		onLoad() {
			this.getCurrentTime();
			this.getWeek()
			this.getAdd()
			this.intervalId = setInterval(() => {
				this.getCurrentTime();
			}, 1000);
		},
		onUnload() {
			this.onBack();
		},
		methods: {
			getCurrentTime() {
				const now = new Date();
				const year = now.getFullYear();
				const month = String(now.getMonth() + 1).padStart(2, '0');
				const day = String(now.getDate()).padStart(2, '0');
				const hours = String(now.getHours()).padStart(2, '0');
				const minutes = String(now.getMinutes()).padStart(2, '0');
				const seconds = String(now.getSeconds()).padStart(2, '0');
				this.date = `${hours}:${minutes}:${seconds}`;
			},
			getWeek() {
				const now = new Date();
				const year = now.getFullYear();
				const month = String(now.getMonth() + 1).padStart(2, '0');
				const day = String(now.getDate()).padStart(2, '0');
				const dayOfWeek = now.getDay();
				let weekDay;
				let new_day
				switch (dayOfWeek) {
					case 0:
						weekDay = '星期日';
						new_day = '周日'
						break;
					case 1:
						weekDay = '星期一';
						new_day = '周一'
						break;
					case 2:
						weekDay = '星期二';
						new_day = '周二'
						break;
					case 3:
						weekDay = '星期三';
						new_day = '周三'
						break;
					case 4:
						weekDay = '星期四';
						new_day = '周四'
						break;
					case 5:
						weekDay = '星期五';
						new_day = '周五'
						break;
					case 6:
						weekDay = '星期六';
						new_day = '周六'
						break;
				}
				this.weekDay = weekDay
				this.new_day = new_day
				this.n_date = `${year}-${month}-${day}`;
			},
			getAdd() {
				uni.getLocation({
					type: 'gcj02',
					altitude: true,
					isHighAccuracy: true,
					geocode: true,
					success: function(res) {
						console.log(res);
						console.log('当前位置的经度：' + res.longitude);
						console.log('当前位置的纬度：' + res.latitude);
					},
					fail(err) {
						console.log(err);
					}
				});
			},
			onBack(op) {
				// 处理页面返回事件，清除定时器
				if (this.intervalId) {
					clearInterval(this.intervalId);
					this.intervalId = null;
				}
			},
			daka() {
				this.stepList[0].date = this.date
				this.stepList[0].add = this.address
			}
		}
	}
</script>

<style lang="scss">
	.content {
		padding: 28rpx 37rpx;

		.information {
			background-color: #fff;
			box-shadow: 0rpx 3rpx 5rpx 0rpx rgba(0, 0, 0, 0.15);
			border-radius: 53rpx;
			padding: 48rpx 45rpx 40rpx 38rpx;

			.left {
				justify-content: space-between;
				margin-bottom: 68rpx;

				.s_time {}

				.n_date {
					.week {
						text-align: right;
						color: #666666;
					}

					.day {
						color: #666666;
					}
				}
			}

			.workTime {
				margin-bottom: 56rpx;
				color: #666666;
			}

			.stept {
				margin-bottom: 104rpx;
			}

			.location {
				display: flex;
				align-items: center;
				margin-bottom: 97rpx;

				.icon {
					width: 20rpx;
					height: 26rpx;
					display: flex;
					align-items: center;

					image {
						width: 20rpx;
						height: 26rpx;
					}
				}

				.title {
					color: #333333;
					margin: 0 8rpx;
				}

				.image {
					width: 21rpx;
					height: 18rpx;
					display: flex;
					align-items: center;

					image {
						width: 21rpx;
						height: 18rpx;
					}
				}
			}

			.btn {
				width: 150rpx;
				height: 150rpx;
				background: linear-gradient(180deg, #82D592 0%, #32BA85 100%);
				border-radius: 50%;
				color: #FFFFFF;
				line-height: 150rpx;
				text-align: center;
				margin: 0 auto;
			}
		}

		.dai {
			margin-top: 29rpx;
			margin-bottom: 19rpx;
		}

		.list {
			padding: 31rpx 22rpx;

			.item {
				margin-bottom: 24rpx;
				display: flex;
				align-items: center;

				.image {
					width: 169rpx;
					height: 169rpx;
					background: #F3A8B5;
					border-radius: 21rpx;
					overflow: hidden;
					margin-right: 20rpx;

					image {
						width: 169rpx;
						height: 169rpx;
					}
				}

				.info {
					flex: 1;

					.title {
						color: #333333;
						display: -webkit-box;
						-webkit-line-clamp: 1;
						-webkit-box-orient: vertical;
						overflow: hidden;
						margin-bottom: 27rpx;
					}

					.tabs {
						display: flex;
						align-items: center;
						margin-bottom: 27rpx;

						.items {
							color: #666666;
						}
					}

					.left {
						align-items: flex-end;

						.n_price {
							color: #FF4A00;
							margin-right: 9rpx;
						}

						.o_price {
							color: #333333;
							margin-right: 9rpx;
							text-decoration: line-through;
						}

						.icon {
							width: 26rpx;
							height: 26rpx;
							display: flex;
							align-items: center;

							image {
								width: 26rpx;
								height: 26rpx;
							}
						}

						.time {
							color: #333333;
						}
					}
				}

				.s_time {
					.text {
						width: 142rpx;
						height: 43rpx;
						background: linear-gradient(0deg, #2AB883 0%, #89D894 100%);
						border-radius: 20rpx;
						color: #FFFFFF;
						line-height: 43rpx;
						text-align: center;
					}

					.tips {
						color: #FF6000;
						text-align: center;
					}
				}
			}
		}
	}
</style>